<template>
  <div>
    <el-header>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>餐厅详情</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main>
      <div class="restaurant-details">
        <img :src="restaurant.image" alt="Restaurant Image" class="restaurant-image" />
        <h1>{{ restaurant.name }}</h1>
        <p>评分: {{ restaurant.rating }}</p>
        <div class="menu">
          <h2>菜单</h2>
          <div class="dish" v-for="dish in restaurant.menu" :key="dish.id">
            <img :src="dish.image" alt="Dish Image" class="dish-image" />
            <h3>{{ dish.name }}</h3>
            <p>价格: {{ dish.price }}</p>
          </div>
        </div>
        <div class="reviews">
          <h2>用户评价</h2>
          <div class="review" v-for="review in restaurant.reviews" :key="review.id">
            <p>{{ review.text }}</p>
            <p>评分: {{ review.rating }}</p>
          </div>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      restaurant: {
        id: 1,
        name: 'Restaurant 1',
        rating: 4.5,
        image: '/images/restaurant1.png',
        menu: [
          { id: 1, name: '烤鸭', price: 15, image: '/images/meal1.png' },
          { id: 2, name: '蛋炒饭', price: 20, image: '/images/meal2.png' }
        ],
        reviews: [
          { id: 1, text: '很好吃', rating: 5 },
          { id: 2, text: '蛋炒饭很香', rating: 4 }
        ]
      }
    }
  }
}
</script>

<style scoped>
.restaurant-details {
  text-align: center;
}

.restaurant-image {
  //width: 50%;
  max-width: 600px; /* 限制最大宽度 */
  height: 300px;
  //margin: 8px 0; /* 上下间距 */
}
/* 增加导航栏和下面内容的间距 */
.el-header {
  padding: 20px 0; /* 增加上下内边距 */
}
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 10px; /* 添加间距以防止重叠 */
}

.dish {
  width: 200px;
  text-align: center;
}

.dish-image {
  width: 80%;
  height: auto;
  border-radius: 8px; /* 可选：添加圆角 */
}

.reviews {
  margin-top: 20px;
}

.review {
  margin-bottom: 20px; /* 每条评论之间的间距 */
}
</style>